import React, { Component } from 'react';
import { View, ScrollView } from 'react-native';
import { navOptions, BackBtn } from 'bee/navigations';
import {
  SearchJob,
  HasChoosen,
  ForwordAndBack,
} from 'bee/components/ChooseJob';
import { JOBS } from 'bee/constants';
import Picker from './Picker';

// @flow
type Props = {
  navigation: object,
};

const allTypes = [];
JOBS.forEach(type => {
  type.work.forEach(subType => {
    subType.work.forEach(thirdType => {
      allTypes.push(thirdType);
    });
  });
});

export default class ChooseJob extends Component<Props> {
  static navigationOptions = ({ navigation }) =>
    navOptions('职业类型', navOptions.TYPE_BLUE, {
      headerLeft: <BackBtn navigation={navigation} />,
      // headerRight: <MoreBtn />,
    });

  constructor() {
    super();
    this.state = {
      types: [],
      subTypes: [],
      thirdTypes: [],
      selectedType: '',
      selectedSubType: '',
      selectedThirdType: '',
      currentPicker: 1,
    };

    this.filterSubTypes = this.filterSubTypes.bind(this);
    this.handleTopChange = this.handleTopChange.bind(this);
    this.handleSubtypeChange = this.handleSubtypeChange.bind(this);
    this.handleThirdtypeChange = this.handleThirdtypeChange.bind(this);
    this.renderPicker = this.renderPicker.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
  }

  componentWillMount() {
    this.data = JOBS;
    const types = this.filterTypes();

    this.setState({
      types,
    });
  }

  filterTypes() {
    return this.data.map(v => v.name);
  }

  filterSubTypes(selectedType) {
    const subTypes = this.data.find(item => item.name === selectedType);
    return subTypes.work.map(item => item.name);
  }

  filterThirdTypes(selectedType, selectedSubType) {
    const subType = this.data.find(item => item.name === selectedType);
    const thirdType = subType.work.find(item => item.name === selectedSubType);
    return thirdType.work;
  }

  handleTopChange(type) {
    const subTypes = this.filterSubTypes(type);

    this.setState({
      selectedType: type,
      subTypes,
      selectedSubType: '',
      selectedThirdType: '',
      currentPicker: 2,
    });
  }

  handleSubtypeChange(selectedSubType) {
    const thirdTypes = this.filterThirdTypes(
      this.state.selectedType,
      selectedSubType
    );

    this.setState({
      thirdTypes,
      selectedSubType,
      currentPicker: 3,
    });
  }

  handleThirdtypeChange(selectValue, selectLable) {
    this.setState(
      {
        selectedThirdType: selectLable,
        selectedCode: selectValue,
      },
      () => {
        this.props.navigation.goBack();
        this.props.navigation.state.params.updateJob({
          type: this.state.selectedCode,
          name: selectLable,
        });
      }
    );
  }

  handleSearch() {
    const { keyword } = this.state;
    const thirdTypes = allTypes.filter(v => v.name.indexOf(keyword) !== -1);
    this.setState({ currentPicker: 3, thirdTypes });
  }

  renderPicker() {
    const { currentPicker } = this.state;

    switch (currentPicker) {
      case 1:
        return (
          <Picker
            onValueChange={this.handleTopChange}
            selectedValue={this.state.selectedType}
          >
            {this.state.types.map((v, k) => (
              <Picker.Item value={v} label={v} key={k} />
            ))}
          </Picker>
        );
      case 2:
        return (
          <Picker
            onValueChange={this.handleSubtypeChange}
            selectedValue={this.state.selectedSubType}
          >
            {this.state.subTypes.map((v, k) => (
              <Picker.Item value={v} label={v} key={k} />
            ))}
          </Picker>
        );
      case 3:
        return (
          <Picker
            onValueChange={this.handleThirdtypeChange}
            selectedValue={this.state.selectedThirdType}
          >
            {this.state.thirdTypes.map((v, k) => (
              <Picker.Item value={v.type} label={v.name} key={k} />
            ))}
          </Picker>
        );
      default:
        return null;
    }
  }

  render() {
    const { selectedType, selectedSubType, selectedThirdType } = this.state;
    const word = [selectedType, selectedSubType, selectedThirdType]
      .filter(v => !!v)
      .join('-');

    return (
      <View style={{ flex: 1 }}>
        <SearchJob
          onPress={this.handleSearch}
          keyword={this.state.keyword}
          onChangeText={value => {
            this.setState({ keyword: value });
          }}
        />
        <HasChoosen word={word} />
        <ScrollView style={{ flex: 1 }}>{this.renderPicker()}</ScrollView>
        <ForwordAndBack
          onForward={() => {
            if (this.state.currentPicker < 1 || this.state.currentPicker > 3) {
              this.setState({ currentPicker: this.state.currentPicker + 1 });
            }
          }}
          onBack={() => {
            if (this.state.currentPicker < 1 || this.state.currentPicker > 3) {
              this.setState({ currentPicker: this.state.currentPicker - 1 });
            }
          }}
        />
      </View>
    );
  }
}
